<template>
  <section>
    <van-radio-group v-model="radio">
      <van-cell-group>
        <van-cell :key="item.label" :title="item.label" data-index="index" v-for="item in sounds" clickable @click="radio = item.label">
          <van-radio :name="item.label" />
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </section>
</template>
<script>

import "../../../../util/compatibles";
import {RadioGroup,Radio,Cell,CellGroup} from "vant/es";
import common from "../../../../util/index";
// import {mapState, mapMutations} from 'vuex'

export default {
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  computed  : {
  },
  watch:{
    radio:function(newValue,oldValue){
      if(newValue !== oldValue){
        let item = this.flows.find(res=>res.label === newValue);

        //fixme:快速点击可能会出现异常
        if(item === undefined){
          return false;
        }

        this.setPrefs("local.soundPath",item.path);
        this.stopSound();
        this.playSound(item);
      }
    },
  },
  data() {
    return {
      radio:"舒缓",
      soundPlayer:null,
      flows: [
        "舒缓",
        "金属",
      ].map((name,index) => ({label: name, path: `widget://assets/sound/${index}.wav`})),
      isFinish:true,
    };
  },
  mounted(){
    window.apiready = ()=>{
      this.radio = this.flows.find(v=>v.path === this.getPrefsSync("local.soundPath")).label;
    };
  },
  methods   : {
    ck(e){
      console.log(e);
    },
    stopSound(){
      this.soundPlayer = this.soundPlayer || this.getModule("soundPlayer");
      console.log(JSON.stringify(this.soundPlayer));
      this.soundPlayer.stopSound({paths:this.flows.map(item=>item.path)});
    },
    playSound(item){
      this.soundPlayer = this.soundPlayer || this.getModule("soundPlayer");
      this.soundPlayer.play({
        paths:[
          {
            path:item.path,
            leftVolume:1,
            rightVolume:1,
            priority:1,
            loop:-1,
            rate:1,
          },
        ],
      });
    },
    ...common.methods,
  },
};
</script>
<style lang="scss">

</style>
